<script lang="ts" setup>
import { computed } from 'vue';
import { useLocale } from '@/locale/locale';

const props = defineProps<{
  disabled: boolean;
  title: string;
  atLeast: string;
  startDate: string;
  endDate: string;
}>();

const { t } = useLocale();

const description = computed(() => {
  if (props.atLeast == '0') return t('LAKey_couponNoUsageLimit');
  return t('AvailableWhenSpendingOver', { number: props.atLeast });
});

const date = computed(() => {
  if (props.startDate && !props.endDate) return t('LongTermValidity');
  return `${props.startDate.split(' ')[0]}-${props.endDate.split(' ')[0]}`;
});
</script>

<template>
  <view :class="{ 'is-disabled': disabled }" class="apt-coupon-meta">
    <view class="mb-1_5 text-lg text-primary font-medium">{{ title }}</view>
    <view class="mb-1 text-xs text-fourth">{{ description }}</view>
    <view class="text-xs text-fourth">{{ date }}</view>
  </view>
</template>

<style lang="scss">
.apt-coupon-meta {
  margin: 0 16rpx;

  &.is-disabled {
    & .text-primary,
    & .text-fourth {
      color: #c4c4c4;
    }
  }
}
</style>
